<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-collapsible.html">
<link rel="import" href="../common/cr-date.html">
<link rel="import" href="../common/cr-view-handler.html">
<link rel="import" href="../linkify/cr-linkified-text.html">
<link rel="import" href="cr-issue-message-reply.html">

<polymer-element name="cr-issue-message" attributes="message selected">
    <template>
        <cr-view-handler></cr-view-handler>
        <link rel="stylesheet" href="cr-issue-message.css">

        <cr-collapsible class="message {{ {approval: message.approval, disapproval: message.disapproval, generated: message.generated, closed: message.issueWasClosed, selected: selected } | tokenList }}" active="{{ message.active }}" hidden?="{{ message.hidden }}">
            <div id="message-{{ message.sequence }}" class="message-header cr-collapsible-header">
                <div class="message-title" on-tap="{{ showMessage }}">
                    <div class="message-author" title="{{ message.author.email }}">{{ message.author.displayName }}</div>
                    <div class="message-preview">{{ message.preview }}</div>
                </div>
                <div class="message-date">
                    <cr-date date="{{ message.date }}" relative></cr-date>
                </div>
                <a class="message-number" href="#msg{{ message.sequence }}">#{{ message.sequence }}</a>
            </div>
            <div class="message-text">
                <cr-linkified-text text="{{ message.text }}" pre></cr-linkified-text>
            </div>
            <cr-issue-message-reply message="{{ message }}"></cr-issue-message-reply>
        </cr-collapsible>
    </template>
    <script>
        Polymer({
            created: function() {
                this.message = null;
                this.selected = false;
            },
            showMessage: function() {
                this.fire("message-show", {
                    message: this.message,
                });
            },
        });
    </script>
</polymer-element>
